<template>
  <div style="margin: 20px">
    <el-card
      ><el-table :data="skuInfoList" style="width: 100%" border>
        <el-table-column type="index" label="序号" width="width">
        </el-table-column>
        <el-table-column prop="skuName" label="名称" width="width">
        </el-table-column>
        <el-table-column prop="skuDesc" label="描述" width="width">
        </el-table-column>
        <el-table-column label="默认图片" width="width">
          <template slot-scope="{ row }">
            <img :src="row.skuDefaultImg" style="width: 100px" />
          </template>
        </el-table-column>
        <el-table-column prop="weight" label="重量(KG)" width="width">
        </el-table-column>
        <el-table-column prop="price" label="价格(元)" width="width">
        </el-table-column>
        <el-table-column label="操作" width="width">
          <template slot-scope="{ row }">
            <el-tooltip
              class="item"
              effect="dark"
              content="上架"
              placement="bottom"
              v-if="row.isSale == 0"
            >
              <el-button
                type="success"
                size="mini"
                icon="el-icon-top"
                @click="onSale(row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              v-else
              class="item"
              effect="dark"
              content="下架"
              placement="bottom"
            >
              <el-button
                @click="cancelSale(row)"
                type="info"
                size="mini"
                icon="el-icon-bottom"
              ></el-button> </el-tooltip
            ><el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="bottom"
            >
              <el-button
                icon="el-icon-edit"
                size="mini"
                type="primary"
              ></el-button> </el-tooltip
            ><el-tooltip
              class="item"
              effect="dark"
              content="信息"
              placement="bottom"
            >
              <el-button
                icon="el-icon-info"
                type="info"
                size="mini"
              ></el-button> </el-tooltip
            ><el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="bottom"
            >
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
              ></el-button> </el-tooltip
          ></template>
        </el-table-column> </el-table
    ></el-card>
    <MyPagination
      :total="total"
      :currentPage="current"
      @currentChange="currentChange"
    ></MyPagination>
  </div>
</template>

<script>
import MyPagination from "@/components/MyPagination";
export default {
  name: "Sku",
  components: { MyPagination },
  data() {
    return {
      page: 1,
      limit: 10,
      total: 0, // 总页数
      skuInfoList: [],
      current: 1, // 当前页
    };
  },
  mounted() {
    this.getSpuList();
  },
  methods: {
    // 获取spu列表数据
    async getSpuList() {
      let res = await this.$api.sku.getSkuInfoList(this.page, this.limit);
      if (res.code === 200) {
        this.skuInfoList = res.data.records;
        this.total = res.data.total;
        this.current = res.data.current;
        this.limit = res.data.size;
      }
    },
    // 改变页数
    currentChange(page) {
      this.page = page;
      this.getSpuList();
    },
    // 上架
    async onSale(row) {
      console.log(row);
      let res = await this.$api.sku.onSale(row.id);
      if (res.code === 200) {
        this.$message({
          message: "上架成功",
          type: "success",
        });
        this.getSpuList();
      }
    },
    // 下架
    async cancelSale(row) {
      console.log(row);
      let res = await this.$api.sku.cancelSale(row.id);
      if (res.code === 200) {
        this.$message({
          message: "下架成功",
          type: "success",
        });
        this.getSpuList();
      }
    },
  },
};
</script>

<style scoped>
.item {
  margin: 4px;
}
</style>